<section class="flex flex-col max-w-3xl mx-auto mb-12 gap-12">
  <article class="flex flex-col items-center justify-center gap-10 md:flex-row">
    <div
      class="[&>p]:mb-4 [&>p>strong]:text-black [&>p>strong]:bg-yellow-300 [&>p>strong]:font-normal [&>p>strong]:text-base text-black/80 [&>p>strong]:py-0.5 [&>p>strong]:px-1 [&>p>strong]:font-mono text-lg text-pretty order-2 md:order-1 leading-normal"
    >
      <p>
        ¡Hola, soy <strong>midudev</strong>! Mi objetivo es mejorar la
        <strong>empleabilidad</strong> de la comunidad de Programación Hispana y
        el acceso a contenido de calidad sobre <strong>Desarrollo Web</strong>.
      </p>
      <footer class="flex flex-wrap gap-4 items-center">
        <a
          target="_blank"
          rel="noopener"
          href="https://youtube.com/midulive?sub_confirmation=1"
          class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black bg-white transition border border-[#c4302b] rounded-lg md:px-4 md:py-2 hover:bg-[#ffc8c6] md:text-sm"
          ><svg
            class="w-6 h-6 mr-2"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 28.57 20"
            ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.57 20"
              ><path
                fill="red"
                d="M27.9727 3.12324C27.6435 1.89323 26.6768.926623 25.4468.597366 23.2197 2.2e-7 14.285 0 14.285 0S5.35042 2.2e-7 3.12323.597366C1.89323.926623.926623 1.89323.597366 3.12324 2.2e-7 5.35042 0 10 0 10s2.2e-7 4.6496.597366 6.8768c.329257 1.23 1.295864 2.1966 2.525864 2.5258C5.35042 20 14.285 20 14.285 20s8.9347 0 11.1618-.5974c1.23-.3292 2.1967-1.2958 2.5259-2.5258.5974-2.2272.5974-6.8768.5974-6.8768s-.0024-4.64958-.5974-6.87676Z"
              ></path><path
                fill="#fff"
                d="m11.4253 14.2854 7.4224-4.285-7.4224-4.28507v8.57007Z"
              ></path></svg
            ></svg
          >Sígueme en YouTube</a
        >

        <a
          href="https://twitch.tv/midudev"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-[#d1b9ff] md:text-sm border border-[#874af6]"
        >
          <svg
            class="w-6 h-6 mr-1"
            xmlns="http://www.w3.org/2000/svg"
            width="118"
            height="138"
            viewBox="0 0 118 138"
            ><g fill="none" fill-rule="evenodd"
              ><path
                fill="#FFF"
                d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
              ></path><path
                fill="#9146FF"
                d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
              ></path></g
            ></svg
          >Sígueme en Twitch</a
        >
        
        <a
            href="https://discord.gg/midudev"
            target="_blank"
            rel="noopener"
            class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-[#5865F2]/20 md:text-sm border border-[#5865F2]"
          >
          <svg
          class="w-6 h-6 mr-1"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 256 256">
          <path fill="#5865F2" d="M216.856339 16.5966031C200.285002 8.84328665 182.566144 3.2084988 164.041564 0c-2.275041 4.11318106-4.93294 9.64549908-6.765465 14.0464379-19.692104-2.9614483-39.203132-2.9614483-58.5330827 0C96.9108417 9.64549908 94.1925838 4.11318106 91.8971895 0 73.3526068 3.2084988 55.6133949 8.86399117 39.0420583 16.6376612 5.61752293 67.146514-3.4433191 116.400813 1.08711069 164.955721c22.16890891 16.555194 43.65325271 26.611976 64.77502181 33.192855 5.2150826-7.17745 9.8662303-14.807241 13.8730814-22.848315-7.6311949-2.899686-14.9402415-6.478059-21.8464273-10.632298 1.8321746-1.357374 3.6243438-2.776511 5.3558032-4.236706 42.1228202 19.70193 87.8903382 19.70193 129.5099332 0 1.751813 1.460195 3.543631 2.879332 5.355803 4.236706-6.926539 4.174593-14.255589 7.752966-21.886784 10.653002 4.006851 8.02037 8.637996 15.670866 13.873082 22.847965 21.142122-6.580879 42.646399-16.637311 64.815325-33.213209 5.315798-56.28752-9.080862-105.0894778-38.05561-148.3591179ZM85.4738752 135.09489c-12.6448471 0-23.0146535-11.804735-23.0146535-26.179989 0-14.3752538 10.1483733-26.2003423 23.0146535-26.2003423 12.8666312 0 23.2360868 11.804384 23.0146538 26.2003423.020002 14.375254-10.1480226 26.179989-23.0146538 26.179989Zm85.0513618 0c-12.644847 0-23.014653-11.804735-23.014653-26.179989 0-14.3752538 10.148022-26.2003423 23.014653-26.2003423 12.866281 0 23.236087 11.804384 23.014654 26.2003423 0 14.375254-10.148373 26.179989-23.014654 26.179989Z"/>
          </svg>
          Entrar a la comunidad de Discord</a
        >
        
        <a
            href="https://x.com/midudev"
            target="_blank"
            rel="noopener"
            class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-gray-200 md:text-sm border border-black"
          >
          <svg 
            class="w-6 h-6 mr-1"
            xmlns="http://www.w3.org/2000/svg" 
            viewBox="0 0 24 24">
            <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
          </svg>
          Sígueme en X</a
        >
      </footer>
    </div>
    <img
      width="200"
      height="200"
      src="/me.webp"
      alt="Miguel Ángel"
      class="order-1 object-cover w-52 h-full p-1 bg-white md:order-2 rotate-3 lg:p-2 aspect-square rounded-2xl dark:bg-yellow-500/5"
      style="object-position: center"
    />
  </article>
</section>
